<template>
    <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="父级">
            <el-input type="text" v-model="parent_name" disabled/>
        </el-form-item>
        <el-form-item prop="name" label="规则名">
            <el-input type="text" v-model="form.name" :maxlength="50"/>
        </el-form-item>
        <el-form-item prop="path" label="规则">
            <el-input type="text" v-model="form.path" :maxlength="50"/>
        </el-form-item>
        <el-form-item label="图标">
            <el-input type="text" v-model="form.ext" :maxlength="50"/>
        </el-form-item>
        <el-form-item class="text-center">
            <el-button type="primary" @click="submit" :loading="btnload">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {ruleMenus} from "@/api";

    export default {
        data() {
            return {
                rules: {
                    name: [
                        {required: true, message: '规则名不能为空', trigger: 'blur'}
                    ]
                    , path: [
                        {required: true, message: '规则不能为空', trigger: 'blur'}
                    ]
                }
                , roleID: ''
                , btnload: false
                , parent_name: '顶级'
                , form: {
                    parent: 0,
                    name: '',
                    path: '',
                    ext: '',
                }
            }
        }
        , props: ['pdata']
        , mounted() {
            if (this.pdata != null) {
                this.form.parent = this.pdata.id;
                this.parent_name = this.pdata.name;
            }
        }
        , methods: {
            submit() {
                this.$submit(this.$refs['form'], () => {
                    this.btnload = true;
                    if (this.roleID) {
                        this.form.id = this.roleID;
                    }
                    ruleMenus(this.form, 'post', () => {
                        this.$message.success('操作成功');
                        this.$emit('close', true)
                    }, () => {
                        this.btnload = false;
                    })
                });
            }
        }
    }
</script>

<style>

</style>

